<template>
  <div>
    <div class="header">
      <div class="iconfont iconjiantou2" @click="back"></div>

      <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />

      <div class="icon" @click="search">搜索</div>
    </div>
    <div v-if="showwws">
      <van-empty image="error" description="没有相关文章" />
    </div>
    <div v-else>
      <Content v-for="item in data" :key="item.id" :item="item" />
    </div>
    <div v-if="showww">
      <h4 v-if="history.length!=0">历史记录</h4>
      <h5 @click="deleter" v-if="history.length!=0">清空历史记录</h5>
      <div class="his">
        <div v-for="(item,index) in history" :key="index" class="hiss" @click="his(index) ">{{item}}</div>
      </div>

      <h4>热门搜索</h4>
      <div class="hot">
        <div
          v-for="(item,index) in hotsearch"
          :key="index"
          class="hots"
          @click="hot(index)"
        >{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import Content from "../components/content";
export default {
  props: ["show", "user"],
  data() {
    return {
      value: "",
      data: [],
      showe: false,
      history: [],
      hotsearch: ["关晓彤", "猪", "美女"],
      showww: true,
      showwws: false
    };
  },
  components: {
    Content: () => import("../components/content")
  },
  methods: {
    search() {
      if (this.value == "") {
        return;
      }
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.value
        }
      }).then(res => {
        this.data = res.data.data;
        // console.log(this.history.length);
        localStorage.setItem("search", this.value);
        // console.log(res);
        this.showww = false;
        if (this.data.length == 0) {
          this.showwws = true;
        }
        if (this.history.length == 0) {
          this.history.push(this.value);
          localStorage.setItem("history", JSON.stringify(this.history));
        } else {
          if (this.history.indexOf(this.value) == -1) {
            this.history.push(this.value);
            localStorage.setItem("history", JSON.stringify(this.history));
          }
        }

        // console.log(this.history);
      });
    },
    back() {
      localStorage.removeItem("search");
      if (this.value != "") {
        this.value = "";
        this.data = [];
        this.showww = true;
        this.showwws = false;
        return;
      }
      if (this.value == "" && this.data.length > 0) {
        // this.value = "";
        this.showww = true;
        this.showwws = false;
        this.data = [];
        return;
        // console.log(456);
      }
      if (this.value == "" && this.data.length == 0) {
        this.$router.push("/");
      }
    },
    hot(index) {
      this.value = this.hotsearch[index];
      this.search();
    },
    his(index) {
      this.value = this.history[index];
      this.search();
    },
    deleter() {
      localStorage.removeItem("history");
      //   this.$router.go(0);
      this.history = [];
    }
  },
  created() {
    if (localStorage.getItem("history")) {
      this.history = JSON.parse(localStorage.getItem("history"));
    }
    if (localStorage.getItem("search")) {
      this.value = localStorage.getItem("search");
      this.search();
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 45px;
  background-color: #fff;
  color: red;
  display: flex;
  text-align: center;
  line-height: 45px;
  // border-radius: 0 0 20px 20px;
  width: 100%;
  border: 2px solid #eee;
  // position: fixed;
  // top: 0;
  // z-index: 100;
  /deep/ .van-search {
    width: 70vw;
    height: 12.889vw;
    font-size: 4.444vw;
  }
  /deep/ .van-search .van-cell {
    padding: 1.389vw 2.222vw 1.389vw 0;
  }
  /deep/ .van-cell {
    font-size: 4vw;
    line-height: 6.667vw;
  }
  /deep/ .van-field__control {
    height: 6.389vw;
    font-size: 4vw;
    line-height: 6.389vw;
  }
  /deep/ .van-search__content {
    padding-left: 2.222vw;
  }
  /deep/ .van-field__left-icon {
    margin-right: 1.389vw;
  }
  /deep/ .van-icon-search {
    font-size: 4vw;
    width: 4.444vw;
    height: 6.111vw;
  }
  .icon {
    flex: 1;
    font-size: 14px;
    text-align: center;
    // margin-right: 10px;
  }
  .userImg {
    // flex: 1;
    width: 35px;
    height: 35px;
    line-height: 40px;
    margin: 5px 10px 5px 10px;
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .iconjiantou2 {
    font-size: 16px;
    flex: 1;
  }
}
h4 {
  padding: 10px;
  font-size: 16px;
}
h5 {
  font-size: 12px;
  padding: 0 0 10px 10px;
  color: #888;
}
.his,
.hot {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #9888;

  .hiss,
  .hots {
    text-overflow: ellipsis;
    margin: 0 0 10px 10px;
    padding: 7px;
    border-bottom: 1px solid #9888;
    text-align: center;
    line-height: 30px;
    // padding-right: 20px;
    // width: 20%;
    font-size: 12px;
    // border-radius: 10px;
  }
}
</style>
